<template>
	<view class="page-body">
		<!--<scroll-view class="nav-top" scroll-x="true" :scroll-left="'width:'+width+'px'">
			<view class="nav-top-item">
				<view @click="orderStatusClickMain(orderTab,index)" :key="index" :class="index==orderStatusActive?'orderStatusActive':''" v-for="(item,index) in ordertatusList">{{item.NAME}}</view>
			</view>
		</scroll-view>-->
		<div class="orderInfo"  v-for="(item,index) in ordersListData" :key="index"><!-- v-for="(items) in ordersListData" -->
			<div class="orderInfo_row leftfloat" >
				 <text class="leftfloat">订单序列号：{{ item.orderNo }}</text>
				 <text class="order_status rightfloat" v-if="item.status == 'processing' && item.type == 'return' ">退货中</text>
				 <text class="order_status rightfloat" v-if="item.status == 'processing' && item.type == 'refund' ">退款中</text>
				 <text class="order_status rightfloat" v-if="item.status == 'success' && item.type == 'return' ">退货成功</text>
				 <text class="order_status rightfloat" v-if="item.status == 'success' && item.type == 'refund' ">退款成功</text>
				 <text class="order_status rightfloat" v-if="item.status == 'fail' && item.type == 'return' ">退货失败</text>
				 <text class="order_status rightfloat" v-if="item.status == 'fail' && item.type == 'refund' ">退款失败</text>
			</div>
			<div class="orderInfo_left">
			   <image :src="item.goodImg" class="order_img"></image>
			</div>
			<div class="orderInfo_right">
			   <div class="order_right_row1">
				  <text class="leftfloat">{{item.goodName}}</text>
				  <text class="rightfloat">{{item.refundAmount}}</text>
			   </div>
			   
			   <div class="order_right_row2">
				  <text class="leftfloat">{{item.malls_count_text}}</text>
				  <text class="order_count rightfloat">x{{item.num}}</text>
			   </div>
			   <div>
				 <text class="order_text1">{{item.malls_size}}</text>
			   </div>
			</div>
			<div class="line"></div>
			<div class="btnView leftfloat">
				<!--<div class="btnRight" @click="goAfterSaleDetails(index)">测试</div>-->
			    <div class="btnRight" @click="afterSaleDetails(index)">查看详情</div>
			</div>
			<view class="line2 leftfloat"></view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ordertatusList: [{"NAME":"待支付"},{"NAME":"待支付"},{"NAME":"待发货"},{"NAME":"待收货"},{"NAME":"售后"}],
				height: 0,
				width: 0,
				orderStatusActive: 4,
				scrollTop: 0,
				scrollHeight: 0,
				ordersListData: [],
				status: '',
			}
		},
		onLoad() {
			let self = this;
			uni.request({
				url: this.$store.state.URL+'order/after_sale/after_sale_list',
				data: {
					token: this.$store.state.token,
					//merchant_id: '',
					//status: ''
				},
				success(res) {
					console.log(res.data);
					self.ordersListData = res.data.data;
				},
				fail(e) {
					console.log(e);
				}
			})
		},
		methods: {
// 			scroll(e) {
// 				this.scrollHeight = e.detail.scrollHeight;
// 			},
            afterSaleDetails(index){
				if(this.ordersListData[index].status == 'processing'){
					if(this.ordersListData[index].type == 'return'){
						uni.navigateTo({
							url: '../../afterSaleStatus/returnProcessing/returnProcessing?afterNo='+this.ordersListData[index].afterNo
						})
					}else{
						uni.navigateTo({
							url: '../../afterSaleStatus/refundProcessing/refundProcessing?afterNo='+this.ordersListData[index].afterNo
						})
					}
				}else if(this.ordersListData[index].status == 'success'){
					if(this.ordersListData[index].type == 'return'){
						uni.navigateTo({
							url: '../../afterSaleStatus/returnSuccess/returnSuccess?afterNo='+this.ordersListData[index].afterNo
						})
					}else{
						uni.navigateTo({
							url: '../../afterSaleStatus/refundSuccess/refundSuccess?afterNo='+this.ordersListData[index].afterNo
						})
					}
				}else{
					if(this.ordersListData[index].type == 'return'){
						uni.navigateTo({
							url: '../../afterSaleStatus/returnFailed/returnFailed?afterNo='+this.ordersListData[index].afterNo
						})
					}else{
						uni.navigateTo({
							url: '../../afterSaleStatus/refundFailed/refundFailed?afterNo='+this.ordersListData[index].afterNo
						})
					}
				}
			},
			goAfterSaleDetails(index){
				uni.navigateTo({
					url: '../../afterSaleStatus/afterSaleStatus?afterNo='+this.ordersListData[index].afterNo+'&status='+this.ordersListData[index].status+'&type='+this.ordersListData[index].type
				})
			},
			orderStatusClickMain(orderTab, index) {
				this.orderStatusActive = index;
			}
		}
	}
</script>

<style>
.page-body{
	color: #B7B7B7;
	background: #F3F3F3;
	height: 1240upx;
}
.clean{
  clean:both;
}
.leftfloat{
	float: left;
}
.rightfloat{
	float: right;
}
.nav-top{
  white-space: nowrap;
  width: 100%;
  text-align: center;
  border-bottom:1upx #e8e8e8 solid;
  background:#FFFFFF;
  color:#8d8d8d;
}
.nav-top-item{
  display: flex;
}
.nav-top-item view{
  font-size:30upx;
  padding: 10upx 0;
  margin:0 35upx;
}
.orderStatusActive{
  border-bottom: 2upx solid #F2526F;  
  color: #F2526F;
  border-bottom-width: 5upx;
}
.orderInfo{
   width: 100%;
   height: 278upx;
   background: #FFFFFF;
}
.orderInfo_row{
	width: 95%;
	padding: 16upx 2.5%;
	font-size: 24upx;
	color: #999999;
}
.order_status{
	color: #F2526F;
}
.orderInfo_left{
  float: left;
  position: relative;
}
.orderInfo_left image{
  width: 180upx;
  height: 120upx;
  margin: 10upx 10upx 10upx 20upx;
  float: left;
}
.orderInfo_right{
  width: 68%;
  height: 140upx;
  margin: 0 2%;
  font-size: 30upx;
  color: #333333;
  float: left;
}
.order_right_row1{
  width: 100%;
  float: left;
}
.order_count{
  color: #B7B7B7;
}
.order_text1{
  float: left;
  margin-top: 10upx; 
  color: #B7B7B7;
  font-size: 24upx;
}
.order_right_row2{
  width: 100%;
  float: left;
}
.btnView{
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 24upx;
  border-top: 2upx #e0e0e0 solid;
  border-bottom: 10upx #F3F3F3 solid;
  padding: 15upx 0;
}
.btnRight{
  border: 1px #F2526F solid ;
  border-radius: 20upx;
  color: #F2526F;
  margin-right: 15upx;
  width: 60px;
  float: right;
}

</style>
